<template>
  <div class="c-ph24 c-pt40 c-pb30 c-bd-b1" v-if="themeName == 'mb5' && !isMicroPage">
    <div class="c-flex-row c-aligni-center">
      <span class="c-fs30">{{taskTitles}}</span>
      <span class="c-fs18 c-fc-sgray c-pt4 c-ml16 c-w0 c-flex-grow1 c-mr16 c-text-ellipsis1">{{taskDesc}}</span>
      <span class="c-fs20 c-fc-gray" @click="clickMoreTask">更多</span>
    </div>
    <div class=" c-pt30 c-flex-row" v-for="(item,index) in taskList" :key="index" @click="clickGoTask(item)">
      <div class="c-ww240 c-maxh160 c-text-hidden c-p">
        <img class="c-w100 imgCloseBig" :src="$addXossFilter(item.vipType==2||item.vipType==4?(item.vipType==2?require('../../assets/i/wap/course/vip.png'):require('../../assets/i/wap/course/svip.png')):item.avatar?item.avatar:require('../../assets/defult270.png'))" />
        <div class="timeShow" v-if="item.btnStatus == 1 || item.btnStatus == 2">距{{item.btnStatus == 1 ? '开始' : '结束'}}：
          <cj-clocker :time="timeFn(index)" format="%D天%H时%M分%S秒" @on-finish="finishFn(index)"></cj-clocker>
        </div>
      </div>
      <div class="c-pl20 c-w0 c-flex-grow1 c-flex-column">
        <div class="c-fs24 c-text-ellipsis3 c-lh32 c-mb20">{{item.name}}</div>
        <div class="c-fs18 c-fc-gray c-text-decoration-through c-mb10" v-if="!$isWxAppIos()">单买价{{item.price}}</div>
        <div class="c-flex-row c-aligni-center" v-if="!$isWxAppIos()">
          <span class="c-fs24" :class="item.btnStatus==1?'c-fc-xblue':'theme-fc'">助力:</span>
          <div class="c-flex-grow1 c-w0 c-flex-row c-aligni-end" :class="item.btnStatus==1?'c-fc-xblue':'theme-fc'">
            <span class="c-fs24">{{'￥' | iosPriceFilter}}</span>
            <span class="c-fs30">0.00</span>
          </div>
          <div :class="item.btnStatus==1?'c-bg-xblue':'theme-bg'" class="c-fc-white c-fs22 c-flex-row c-flex-center c-ww120 c-hh50 c-br25">{{item.btnStatus==1?'去看看':'助力领取'}}</div>
        </div>
      </div>
      <!--<div class="c-pl20 c-w0 c-flex-grow1 c-flex-column">
        <div class="c-fs24 c-text-ellipsis3 c-lh32 c-pb20">{{item.name}}</div>
        <div class="c-flex-row c-aligni-center">
          <div class="c-fs18 c-fc-gray c-flex-grow1 c-w0">{{item.hasMan}}人参与</div>
          <div @click="clickGoTask(item.signColId)" class="c-fc-white c-fs22 c-flex-row c-flex-center c-ww120 c-hh50 c-br25 theme-bg">去打卡</div>
        </div>
      </div>-->
    </div>
  </div>

  <div class="c-ph24 c-pt40 c-bd-b20-f5" v-else-if="themeName == 'mb4' && !isMicroPage">
    <div class="c-flex-row c-aligni-center">
      <span class="c-fs30 theme-bd-l4 c-lh c-pl20">{{taskTitles}}</span>
      <span class="c-fs18 c-fc-sgray c-pt4 c-ml16 c-w0 c-flex-grow1 c-mr16 c-text-ellipsis1">{{taskDesc}}</span>
      <span class="c-fs20 c-fc-gray c-pl8" @click="clickMoreTask">查看更多</span>
    </div>
    <div class="c-flex-row c-flexw-wrap c-justify-sb c-pb30  ">
      <div class="c-ww288 c-pt24" v-for="(item,index) in taskList" :key="index" @click="clickGoTask(item)">
        <div class="c-ww288 c-maxh192 c-br5 c-text-hidden c-p">
          <img class="c-w100 c-br5 imgCloseBig" :src="$addXossFilter(item.vipType==2||item.vipType==4?(item.vipType==2?require('../../assets/i/wap/course/vip.png'):require('../../assets/i/wap/course/svip.png')):item.avatar?item.avatar:require('../../assets/defult270.png'))" />
          <div class="timeShow" v-if="item.btnStatus == 1 || item.btnStatus == 2">距{{item.btnStatus == 1 ? '开始' : '结束'}}：
            <cj-clocker :time="timeFn(index)" format="%D天%H时%M分%S秒" @on-finish="finishFn(index)"></cj-clocker>
          </div>
          <!--<div class="timeShow" v-if="item.status == 3 || item.status == 4">{{item.status == 3 ? '已结束' : '已停止'}}</div>-->
        </div>
        <div class="c-fs24 c-pt12 c-text-ellipsis3">
          {{item.name}}
        </div>
        <div class="c-flex-column c-mt14">
          <span class="c-fs18 c-fc-gray c-text-decoration-through" v-if="!$isWxAppIos()">单买价{{'￥' | iosPriceFilter}} {{item.price}}</span>
          <div class="c-flex-row c-aligni-end" v-if="!$isWxAppIos()">
            <span :class="item.btnStatus==1?'c-fc-xblue':'theme-fc'" class="c-fs24">助力:</span>
            <span :class="item.btnStatus==1?'c-fc-xblue':'theme-fc'" class="c-flex-row c-flex-grow1 c-w0">
              <span class="c-fs24">{{'￥' | iosPriceFilter}}</span>
              <span class="c-fs30">0.00</span>
            </span>
            <span class="c-fc-white c-fs22 c-ph20 c-pv12 c-br36 c-lh" :class="item.btnStatus==1?'c-bg-xblue':'theme-bg'">{{item.btnStatus==1?'去看看':'助力领取'}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="c-ph24 c-pb40 c-bd-b10" v-else-if="themeName == 'mb3' && !isMicroPage">
    <div class="c-pt40 c-flex-row c-aligni-center">
      <span class="c-fs30 theme-bd-l4 c-lh c-pl20">{{taskTitles}}</span>
      <span class="c-fs18 c-fc-sgray c-pt4 c-ml16 c-w0 c-flex-grow1 c-mr16 c-text-ellipsis1">{{taskDesc}}</span>
      <span class="c-fs24 c-fc-gray c-pl8" @click="clickMoreTask">查看更多</span>
    </div>
    <div class=" c-pt30 c-flex-row c-pb24" v-for="(item,index) in taskList" :class="index == taskList.length - 1 ? '' : 'c-bd-b1'" :key="index" @click="clickGoTask(item)">
      <div class="c-ww240 c-maxh160 c-text-hidden c-flex-row c-flex-center c-flex-shrink0 c-p">
        <img class="c-w100 imgCloseBig" :src="$addXossFilter(item.vipType==2||item.vipType==4?(item.vipType==2?require('../../assets/i/wap/course/vip.png'):require('../../assets/i/wap/course/svip.png')):item.avatar?item.avatar:require('../../assets/defult270.png'))" />
        <div class="timeShow" v-if="item.btnStatus == 1 || item.btnStatus == 2">距{{item.btnStatus == 1 ? '开始' : '结束'}}：
          <cj-clocker :time="timeFn(index)" format="%D天%H时%M分%S秒" @on-finish="finishFn(index)"></cj-clocker>
        </div>
      </div>
      <div class="c-pl20 c-w0 c-flex-grow1 c-flex-column">
        <div class="c-fs24 c-text-ellipsis3 c-lh32 c-mb36">{{item.name}}</div>
        <div class="c-fs18 c-fc-gray c-text-decoration-through c-mb10" v-if="!$isWxAppIos()">单买价{{item.price}}</div>
        <div class="c-flex-row c-aligni-center" v-if="!$isWxAppIos()">
          <div class="c-flex-grow1 c-w0 c-fs18" :class="item.btnStatus==1?'c-fc-xblue':'theme-fc'">助力:<span class="c-fs30"><span class="c-fs24">{{'￥' | iosPriceFilter}}</span>0.00</span></div>
          <div :class="item.btnStatus==1?'c-bg-xblue':'theme-bg'" class="c-fc-white c-fs22 c-flex-row c-flex-center c-ww120 c-hh50 c-br25">{{item.btnStatus==1?'去看看':'助力领取'}}</div>
        </div>
      </div>
    </div>
  </div>

  <div class="c-ph24 c-pt24 c-pb24 c-mt10 c-bg-white" v-else-if="themeName == 'mb6' && !isMicroPage">
    <div class="c-flex-row c-aligni-center c-mb10">
      <span class="c-fs28 c-fw-b">{{taskTitles}}</span>
      <span class="c-fs18 c-fc-sgray c-pt4 c-ml16 c-w0 c-flex-grow1 c-mr16 c-text-ellipsis1">{{taskDesc}}</span>
      <span class="c-fs18 c-fc-gray" @click="clickMoreTask">更多助力</span>
    </div>
    <div class="c-bg-white c-pt10 c-pb24">
      <div class="c-flex-row c-pt24" v-for="(item,index) in taskList" :key="index" @click="clickGoTask(item)">
        <div class="c-ww160 c-maxh106 c-text-hidden c-flex-shrink0 c-br6">
          <div class="c-p c-br6 c-text-hidden">
            <img class="c-w100 imgCloseBig c-br6" :src="$addXossFilter(item.vipType==2||item.vipType==4?(item.vipType==2?require('../../assets/i/wap/course/vip.png'):require('../../assets/i/wap/course/svip.png')):item.avatar?item.avatar:require('../../assets/defult270.png'))" />
          </div>

        </div>
        <div class="c-flex-grow1 c-w0 c-pl20 c-flex-column c-pb28 " :class="(index+1) == taskList.length ? '' : 'c-bd-b1-item'">
          <div class="c-fs24 c-fc-xblack c-text-ellipsis2 c-fw-b">{{item.name}}</div>
          <!--<div class="c-fs18 c-fc-gray c-text-ellipsis1 c-mt8 c-hh28 c-text-decoration-through">单买价{{'￥' | iosPriceFilter}} {{item.price}}</div>-->
          <div class="c-fs18 c-fc-gray c-mt8 c-hh28 c-flex-row c-justify-sb c-text-ellipsis1">
            <span class="c-text-decoration-through" v-if="!$isWxAppIos()">单买{{'￥' | iosPriceFilter}}{{item.price}}</span>
            <div class="c-fc-sgray" v-if="item.btnStatus == 1 || item.btnStatus == 2">距{{item.btnStatus == 1 ? '开始' : '结束'}}:
              <cj-clocker :time="timeFn(index)" format="%D天%H时%M分%S秒" @on-finish="finishFn(index)"></cj-clocker>
            </div>
          </div>
          <div class="c-flex-row c-aligni-end c-justify-sb c-mt10" v-if="!$isWxAppIos()">
            <span :class="item.btnStatus==1?'c-fc-xblue':'theme-fc'" class="c-fs18">助力:<span class="c-fs22">{{'￥' | iosPriceFilter}}0.00</span></span>
            <span class="c-fc-white c-fs22 c-ph16 c-pv12 c-br5 c-lh" :class="item.btnStatus==1?'c-bg-xblue':'theme-bg'">{{item.btnStatus==1?'去看看':'助力领取'}}</span>
          </div>
        </div>
      </div>
    </div>
    <!--<div class="c-pt24 c-flex-row" v-for="(item,index) in taskList" :key="index">
      <div class="c-ww160 c-maxh106 c-text-hidden">
        <img class="c-w100 imgCloseBig c-br6" :src="item.cover || require('../../assets/defult270.png')" />
      </div>
      <div class="c-pl20 c-w0 c-flex-grow1 c-flex-column c-pb28" :class="index == taskList.length - 1 ? '' : 'c-bd-b1'">
        <div class="c-fs24 c-text-ellipsis2 c-pb20">{{item.name}}</div>
        <div class="c-flex-row c-aligni-center">
          <div class="c-fs18 c-fc-gray c-flex-grow1 c-w0">{{item.hasMan}}人参与</div>
          <div @click="clickGoTask(item.signColId)" class="c-fc-white c-fs22 c-flex-row c-flex-center c-ww120 c-hh50 c-br25 theme-bg">去打卡</div>
        </div>
      </div>
    </div>-->
  </div>

</template>
<script>
import { utilJs } from "@/utils/common.js";
import { goDetails } from "@/utils/goDetails.js";
export default {
  name: "ClockIndexCom",
  components: {
  },
  props: {
    uiStyleType: {
      type: Number,
      default: 1
    },
    taskTitles: {
      type: String,
      default: '助力专区',
    },
    taskDesc: {
      type: String,
      default: '友情灌溉，免费领取',
    },
    taskList: {
      type: Array,
      default: () => []
    },
    isFromM7: {
      type: Boolean,
      default: false
    },
    isMicroPage: {
      type: Boolean,
      default: false
    },
    itemType: {
      type: Number,
      default: 1, //1一行一列，2一行两列，3一行三列
    },
    showCount: {
      type: Number,
      default: 1
    },
    showMore: {
      type: Number,
      default: 0,
    },
    visible:{
      type: Object,
      default: () => {
        return {
          priceVisible:true, // 价格、商品价格
          originalPriceVisible:true, // 划线价格
          dataVisible:true, // 商品数据、数据字段、数据
          statusVisible:true, // 状态
          forecastVisible:true, // 预告时间
          qrVisible:true, // 预告二维码
          vipVisible:true, // vip角标
        }
      },
    }
  },
  data() {
    return {
      theme: localStorage.getItem("colorName") || "mb5_default",
      themeName: localStorage.getItem("themeName") || "mb5"
    };
  },
  methods: {
    clickMore() {
      this.$emit('clickMore');
    },
    iosAppRouteChange(toPath) {
      if (utilJs.isIOSApp()) {
        window.webkit.messageHandlers.iosWechatRoute.postMessage(toPath);
      } else if (utilJs.isAndoridNewApp()) {
        let data = {
          path: toPath
        }
        window.androidWechatRoute.doAction(JSON.stringify(data))
      } else {
        this.$routerGo(this, "push", { path: toPath });
      }
    },
    timeFn: function (index) {
      let stime = this.taskList
        ? utilJs.getTimeByDate(this.taskList[index].startAt)
        : 0;
      let etime = this.taskList
        ? utilJs.getTimeByDate(this.taskList[index].endAt)
        : 0;
      let nowTime = new Date().getTime();
      //status 1未开始,2进行中,3已结束,4已停止
      let time = "";
      if (stime > nowTime) {
        this.taskList[index].btnStatus = 1;
        time = this.taskList[index].startAt;
      } else if (etime > nowTime) {
        this.taskList[index].btnStatus = 2;
        time = this.taskList[index].endAt;
      }
      return time;
    },
    finishFn: function (index) {
      if (this.taskList[index].btnStatus == 1) {
        this.taskList[index].btnStatus = 2;
      }
    },
    clickMoreTask() {
      let toPath = `/homePage/task/taskList`;
      this.iosAppRouteChange(toPath);
    },
    //    clickGoTask(tItem) {
    //      this.$routerGo(this, "push", {
    //        path: "/homePage/task/task",
    //        query: {
    //          faId: tItem.faId,
    //          refereeId: localStorage.getItem("userId")
    //        }
    //      });
    //    },
    clickGoTask: function (tItem) {
      let type = tItem.prodType;
      let prodId = tItem.prodId;
      // 跳转到对应的详情页面 好友灌溉接口约定的prodType  0视频，1音频，2图文，3课程，4专栏，5vip升级页面，6测评，7交互测评，8语音测评，9知识套餐，10打卡，11训练营 ，12社群，13约课，14直播，15电子书，16资料库
      // 将好友灌溉接口约定的prodType 转为 goDetails.js中typeToUrl的key值
      let typeArr = [5, 5, 5, 5, 9, 1, 11, 75, 77, 61, 41, 78, 10, 53, 51, 142, 8];
      type = typeArr[Number(type)];
      let query = {}
      if (type == global.ckFrom.vip && (tItem.btnStatus == 1 || tItem.btnStatus == 2)) {
        query.isFa = true;
        prodId = tItem.faId;
      }
      goDetails(this, type, prodId, query, (tItem.courseType || 0), 1);
    }
  }
};
</script>

<style scoped>
.timeShow {
  font-size: 0.45rem;
  color: #fff;
  line-height: 0.9rem;
  width: 100%;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  bottom: 0;
  left: 0;
}
.c-lh-important {
  line-height: 1.2 !important;
}
.c-mb36 {
  margin-bottom: 0.9rem;
}
.c-bd-b1-item {
  border-bottom: 1px solid #f4f4f4;
}
</style>
